<template>
  <!-- 车牌组件 -->
  <view class="plate-popup" v-show="plateShow">
    <view class="plate-close" @click="close">X 关闭</view>
    <view v-show="!plateNumber">
      <view class="plate-popup-item">
        <view class="plate-popup-item-list" v-for="(item,itemIndex) in keyVehicle1" :key="itemIndex"
          @click="plateHead(item)">{{item}}</view>
      </view>
      <view class="plate-popup-item">
        <view class="plate-popup-item-list" v-for="(item,itemIndex) in keyVehicle2" :key="itemIndex"
          @click="plateHead(item)">{{item}}</view>
      </view>
      <view class="plate-popup-item">
        <view class="plate-popup-item-list" v-for="(item,itemIndex) in keyVehicle3" :key="itemIndex"
          @click="plateHead(item)">{{item}}</view>
      </view>
      <view class="plate-popup-item">
        <view class="plate-popup-item-list" v-for="(item,itemIndex) in keyVehicle4" :key="itemIndex"
          @click="plateHead(item)">{{item}}</view>
        <!-- 删除 -->
        <view class="plate-popup-item-list del" @click="plateDel">
          删除
        </view>
      </view>
    </view>

    <view v-show="plateNumber">
      <view class="plate-popup-item">
        <!-- 数字选择 -->
        <view class="plate-popup-item-list small" :class="plateNumber.length<2 ?'special':''"
          v-for="(item,itemIndex) in keyNumber" :key="itemIndex" @click="plateNum(item)">{{item}}</view>
      </view>
      <view class="plate-popup-item">
        <view class="plate-popup-item-list small" :class="!isInputZh?'':''" v-for="(item,itemIndex) in keyEnInput1"
          :key="itemIndex" @click="plateInput(item)">{{item}}</view>
      </view>
      <view class="plate-popup-item">
        <view class="plate-popup-item-list small" :class="!isInputZh?'':''" v-for="(item,itemIndex) in keyEnInput2"
          :key="itemIndex" @click="plateInput(item)">{{item}}</view>
      </view>
      <view class="plate-popup-item">
        <view class="plate-popup-item-list small" :class="!isInputZh?'':''" v-for="(item,itemIndex) in keyEnInput3"
          :key="itemIndex" @click="plateInput(item)">{{item}}</view>
        <!-- 车牌最后一位-->
        <view class="plate-popup-item-list small" :class="plateNumber.length===6 ?'':'special'"
          v-for="(item,itemIndex) in keyEnInput4" :key="itemIndex" @click="plateLast(item)">{{item}}</view>
        <!-- 删除 -->
        <view class="plate-popup-item-list del" @click="plateDel">
          删除
        </view>
      </view>
    </view>
    <!-- <button class="btn" type="button" @click="show" data-position="bottom">测试车牌键盘</button> -->

  </view>

</template>

<script>
  export default {
    name: 'plateNumber',
    data() {
      return {
        plateNumber: '', //输入的车牌
        plateShow: false, //车牌选择是否打开
        keyVehicle1: ['京', '沪', '粤', '湘', '津', '冀', '豫', '云', '辽'],
        keyVehicle2: ['皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘'],
        keyVehicle3: ['晋', '蒙', '陕', '吉', '闽', '贵', '渝', '川', '黑'],
        keyVehicle4: ['青', '藏', '琼', '宁', '使', '领'],
        keyNumber: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
        keyEnInput1: ["Q", "W", "E", "R", "T", "Y", "U", "P", "A", "S"],
        keyEnInput2: ["D", "F", "G", "H", "J", "K", "L", "Z", "X", "C"],
        keyEnInput3: ["V", "B", "N", "M"],
        keyEnInput4: ["港", "澳", "学", ],
        isInputZh: false, //是否输入了特殊字符
        src: '',
        closeAreaHeigh: 200,
      }
    },

    onLoad() {},
    methods: {
      /**
       * @desc 初始化
       */
      init() {
        this.plateNumber = '';
        this.isInputZh = false;
      },
      /**
       * @desc 打开下拉栏
       */
      show() {
        this.plateShow = true;
        //传值到父组件
        this.$emit('showOrHide', true);
      },
      /**
       * @desc 关闭弹出的车牌
       */
      close() {
        this.plateShow = false;
        //传值到父组件
        this.$emit('showOrHide', false);
      },
      /**
       * @desc 首字母选择
       */
      plateHead(plate) {
        if (!this.plateNumber) {
          this.plateNumber = this.plateNumber + plate;
          //与父组件双向绑定，传值到父组件
          this.$emit('input', this.plateNumber);
        }
      },
      /**
       * @desc 字母选择
       */
      plateInput(plate) {
        //判断是否输入了字母
        if (this.isInputZh) {
          return;
        }
        if (this.plateNumber.length < 8) {
          this.plateNumber = this.plateNumber + plate;
          //与父组件双向绑定，传值到父组件
          this.$emit('input', this.plateNumber);
        }
      },
      /**
       * @desc 数字选择
       */
      plateNum(plate) {
        //判断是否输入了字母
        if (this.isInputZh) {
          return;
        }
        if (this.plateNumber.length >= 2 && this.plateNumber.length < 8) {
          this.plateNumber = this.plateNumber + plate;
          //与父组件双向绑定，传值到父组件
          this.$emit('input', this.plateNumber);
        }
      },
      /**
       * @desc 最后一位选择
       */
      plateLast(plate) {
        //判断是否输入了字母
        if (this.isInputZh) {
          return;
        }
        if (this.plateNumber.length === 6) {
          this.plateNumber = this.plateNumber + plate;
          this.isInputZh = true;
          //与父组件双向绑定，传值到父组件
          this.$emit('input', this.plateNumber);
        }
      },
      /**
       * @desc 删除
       */
      plateDel() {
        if (this.plateNumber) {
          this.plateNumber = this.plateNumber.substring(0, this.plateNumber.length - 1);
        }

        if (this.plateNumber.length === 6) {
          this.isInputZh = false;
        }
        //与父组件双向绑定，传值到父组件
        this.$emit('input', this.plateNumber);
      }
    }
  }
</script>


<style lang="stylus" scoped>
  .plate-popup {
    position: fixed;
    z-index: 999;
    background-color: #E3E2E7;
    -webkit-box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
    bottom: 0;
    width: 100%;
    height 400rpx;
    overflow: hidden;
    text-align: center;
    left 0rpx;
  }

  //关闭
  .plate-close {
    width: 100%;
    line-height 60rpx;
    background: #FFFFFF;
    text-align: right;
    color: #00A7EA;
    padding-right 20rpx;
    // background #0053FF
    // border 1rpx solid #00A7EA
  }

  //键盘主体内容-单行
  .plate-popup-item {
    margin: 0 auto;
    overflow: hidden;
    display: inline-block;
    // display: table;
  }

  .plate-popup-item:last-child {
    margin-bottom: 2rpx;
  }


  //键盘主体内容-单个
  .plate-popup-item-list {
    float: left;
    width: 76rpx;
    margin: 0 4rpx;
    margin-top: 8rpx;
    height: 70rpx;
    line-height: 66rpx;
    background: #FFFFFF;
    border-radius: 6rpx;
    color: #4A4A4A;
  }

  .plate-popup-item-list:first-child {
    margin-left: -2rpx;
  }

  .plate-popup-item-list.small {
    width: 66rpx;
  }

  //删除键
  .plate-popup-item-list.del {
    width: 14vw;
    background: #ccc;
    // display: flex;
    text-align center
  }

  //删除键图片
  .del>image {
    width: 50%;
    height: 50%;
    margin: 0 auto;
    display: block;
    vertical-align: middle;
    align-self: center;
  }

  //特殊字符（港澳学）
  .plate-popup-item-list.special {
    color: #999;
  }
</style>
